<template>
  <div class="dashboard-container">
    <div class="vacationContent">
      <div class="title">假期管理</div>
      <div class="butList">
        <div @click="addHander('add')" style="display: inline-block"><span>+</span> 添加假期</div>
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="假期名称" width="120" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column align="center" label="请假单位" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.applyUnit == 1 ? '按小时请假' : '按半天请假' }}</template>
            </el-table-column>
            <el-table-column align="center" label="计算请假时长方式" >
              <template slot-scope="scope">
                <span>{{ scope.row.accountingType == 1 ? '按工作日计算' : '按小时计算' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="余额规则" show-overflow-tooltip>
              <template slot-scope="scope">
                <span> {{ scope.row.givingType == 1 ? '每年自动发放一次' : '工作日自由请假' }} </span>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHander(scope.row)">编辑</span>
                <span class="actLab" @click="delHander(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              v-if="total > pageSize"
              layout="prev, pager, next"
              @current-change="handlePageChange"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" center>
        <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
          <el-form-item label="假期名称" size="mini">
            <el-input style="width: 175px;" placeholder="请输入假期名称" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="最小请假单位">
            <el-select v-model="ruleForm.applyUnit"  size="mini" placeholder="请选择活动区域">
              <el-option label="按小时请假" value="1"></el-option>
              <el-option label="按半天请假" value="2"></el-option>
              <el-option label="按工作日计算请假时长" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="一天折算为">
            工作时长 <input type="text" class="miniInput" v-model="ruleForm.hoursADay"> 小时
          </el-form-item>
          <el-form-item label="请假时长合算" size="mini">
            <el-select v-model="ruleForm.accountingType" placeholder="请选择活动区域">
              <el-option label="按工作日计算请假时长" value="1"></el-option>
              <el-option label="按休息日计算请假时长" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="余额发放方式" size="mini">
            <el-select v-model="ruleForm.givingType" @change="givingTypeSet" placeholder="请选择活动区域">
              <el-option label="每年自动发放一次" value="1"></el-option>
              <el-option label="每月自动发放一次" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发放日期" size="mini">
            <div v-if="ruleForm.givingType == 1">每年 <input type="text" v-model="ruleForm.givingDate" @blur="ruleDate" class="miniInput" placeholder=""> 发放
              <div style="color: #999;font-size: 12px;"> 例：1-1： 每年 1月1号发放</div>
            </div>
            <div v-if="ruleForm.givingType == 2">每月 <input type="text" v-model="ruleForm.givingDate" @blur="ruleDate" class="miniInput" placeholder=""> 号发放
              <div style="color: #999;font-size: 12px;">例：1：(允许输入范围1到31) 每月 1号发放</div>
            </div>
          </el-form-item>
          <el-form-item label="额度配置规则" size="mini">
            <el-select v-model="ruleForm.amountRuleType" placeholder="请选择活动区域">
              <el-option label="固定额度" value="1"></el-option>
              <el-option label="按司龄" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="ruleForm.amountRuleType == 2" label="" size="mini">
            <div >
              <div v-for="(item, index) in ruleForm.ruleByServiceTime" :key="index">司龄 {{index == 0 ? `< 1` : `≥ ${index}`}} 年，享有 <input type="text" class="miniInput" @input="changehandle(index)" :value="item"> 天年假 <span class="actionHandle" v-if= "index == ruleForm.ruleByServiceTime.length-1" @click="actionHandle('del')">删除</span></div>
              <div><span class="actionHandle" @click="actionHandle">新增</span></div>
            </div>
          </el-form-item>
          <el-form-item v-if="ruleForm.amountRuleType == 1" label="额度" size="mini">
            每人每年发放 <input type="text" class="miniInput" v-model="ruleForm.fixedAmount"> 天
          </el-form-item>
          <el-form-item label="有效期" size="mini">
            <el-input value="自发放日起1周年" disabled style="width: 175px;background: #fff;margin-bottom: 15px;"></el-input>
            <div>
              <el-checkbox-group v-model="isAllow">
                <el-checkbox label="true">允许延长有效期</el-checkbox>
              </el-checkbox-group></div>
            <div v-if="isAllow">超过有效期，余额保留 <input v-model="ruleForm.validityPeriod"  class="miniInput"></input> 天</div>
          </el-form-item>
          <div class="submitBox">
            <el-button size="mini" style="color:#3345ff;border-color: #3345ff" @click="() => dialogVisible = false">取消</el-button>
            <el-button size="mini" type="primary" class="submit" @click="submitSetAdmin">保存</el-button>
          </div>
        </el-form>
      </el-dialog>
      <!--      // 删除-->
      <el-dialog title="确认删除" :visible.sync="qurenDel" width="30%" center>
        <div style="text-align: center">
          <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
          <p>确认后该信息将被删除，</p>
          <p>并不可恢复，是否确认删除？</p>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: 'Dashboard',
        data() {
            return {
                title: '添加假期',
                dialogVisible:false,
                qurenDel:false,
                loading:false,
                tableData: [],
                total: 0,
                page: 1,
                pageSize: 10,
                value:'',
                options: [],
                adminListData: [],
                checkList:[],
                delId:'',
                isAllow: '',
                ruleForm: {
                    name: '',
                    applyUnit: '1',
                    hoursADay:'',
                    accountingType: '1',
                    givingType: '1',
                    givingDate: '1-1',
                    amountRuleType: '1',
                    ruleByServiceTime: [1,2],
                    fixedAmount:'',
                    validityPeriod: '',
                },
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ]),
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                this.$store.dispatch('attendance/getRuleHolidayListAct', {page:this.page,pageSize:this.pageSize}).then((res) => {
                    this.tableData = res.rows
                    this.total = Number(res.total)
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            changehandle(ind){
              let num = event.data
              if(this.ruleForm.ruleByServiceTime.length >= ind){
                 num = this.ruleForm.ruleByServiceTime[ind] + event.data
              }
              this.ruleForm.ruleByServiceTime[ind] = Number(num)
            },
            ruleDate(obj){
                let dat = obj.target.value
                if (this.ruleForm.givingType == 2){
                    if (dat.length == 1 && dat.search(/^[1-9]/) == -1 || dat.length == 2 && dat.search(/^[1-3][0-9]$/) == -1 ||dat.length == 2 && Number(dat) >31 || dat.length > 2 ){
                        this.$message.error('输入格式错误！')
                        this.ruleForm.givingDate = '1'
                    }
                } else {
                    if (dat.search(/\d-\d/) == -1){
                        this.$message.error('输入格式错误！')
                        this.ruleForm.givingDate = '1-1'
                    }
                }
            },
            addHander(){
                this.cgState = 'add'
                this.title = '添加假期'
                this.ruleForm = {
                    name: '',
                    applyUnit: '1',
                    hoursADay:'',
                    accountingType: '1',
                    givingType: '1',
                    givingDate: '1-1',
                    amountRuleType: '1',
                    ruleByServiceTime: [1,2],
                    fixedAmount:'',
                    validityPeriod: '',
                }
                this.value = ''
                this.dialogVisible = true
            },
            editerHander(row){
                this.cgState = 'edit'
                this.title = '编辑假期'
                let ruleData = {...row}
                ruleData.accountingType = String(ruleData.accountingType)
                ruleData.givingType = String(ruleData.givingType)
                ruleData.amountRuleType = String(ruleData.amountRuleType)
                ruleData.applyUnit = String(ruleData.applyUnit)
                this.ruleForm = ruleData
                if (row.validityPeriod){
                    this.isAllow = true
                }
                this.dialogVisible = true
            },
            delHander(row) {
                this.delId = row.id
                this.qurenDel = true
            },
            confirmDel() {
                this.$store.dispatch('attendance/delRuleHolidayAct',{id:this.delId}).then((res) => {
                    this.$message.success('删除成功！')
                    this.qurenDel = false
                    this.init()
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            handlePageChange(val) {
                this.page = val
                this.init()
            },
            // 余额发放配置发布日期
            givingTypeSet(obj){
                this.ruleForm.givingDate = obj == 1 ? '1-1' : '1'
            },
            // 司龄配置
            actionHandle(st){
                let arr = this.ruleForm
                if (st != 'del'){
                    arr.ruleByServiceTime.push(1)
                }else{
                    arr.ruleByServiceTime.pop()
                }
                
                this.ruleForm = arr
            },
            submitSetAdmin(){
                const data = this.ruleForm
                if (data.name == '') {
                    this.$message.error('假期名称不能为空！')
                    return false
                }
                if (data.givingDate == '') {
                    this.$message.error('发放日期不能为空！')
                    return false
                }
                if (data.hoursADay == ''){
                    this.$message.error('一天折算不能空！')
                    return false
                }
                if (data.amountRuleType == 1 && data.fixedAmount == ''){
                    this.$message.error('额度不能空！')
                    return false
                }
                if (this.isAllow && data.validityPeriod == ''){
                    this.$message.error('有效期不能空！')
                    return false
                }
                let url = this.cgState == 'add' ? 'attendance/addRuleHolidayAct' : 'attendance/putRuleHolidayAct'
                this.$store.dispatch(url, {...this.ruleForm}).then((res) => {
                    this.$message.success('数据提交成功！')
                    this.init()
                    this.dialogVisible = false
                    this.adminListData = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            }
        }
    }
</script>
<style lang="scss">
  .vacationContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .vacationContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          cursor: pointer;
          color: #3345ff;
          font-size: 14px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }
        .cont {
          padding:0 20px;
          .tableCont{
            background: #fff;
            p{
              margin: 0px;
            }
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
          line-height: 50px;
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
        }
        .miniInput {
          width: 50px;
          line-height: 17px;
          border-radius: 3px;
          border: solid 1px #ccc;
          padding: 3px 4px;
        }
        .submitBox{
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .submit{
            background: #3345ff;
            border-color:#3345ff;
          }
        }
      }
      .actionHandle{
        color:#3345ff;
        cursor: pointer;
      }
    }
  }
</style>
